<template>
    <div class="factoryDetail">
        <div class="box_top">
            <div class="top_item">
                <span class="title">告警总数</span>
                <span class="number">{{ indexStats.warn_total }}</span>
            </div>
            <div class="top_item">
                <span class="title">设备总数</span>
                <span class="number">{{ indexStats.device_num }}</span>
            </div>
            <div class="top_item">
                <span class="title">测点总数</span>
                <span class="number">{{ indexStats.sensor_num }}</span>
            </div>
            <div class="top_item">
                <span class="title">工单总数</span>
                <span class="number">{{ indexStats.order_total }}</span>
            </div>
        </div>
        <div class="box_right">
            <el-select v-model="factory.factorySelected" placeholder="选择工厂" @change="changeFactory">
                <el-option v-for="item in factory.factoryList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <div class="warn">
                <div class="title">近期告警</div>
                <div class="warn_items">
                    <div @click="toDeviceDel(item)" class="warn_item" v-for="item in alarmData" :key="item">
                        <div class="warn_time">{{ item.create_time }}</div>
                        <div class="warn_title">
                            <span>{{ item.title }}</span>
                        </div>
                        <div class="warn_device">
                            <span>{{ item.device_name }}</span>
                        </div>
                        <div class="warn_level">
                            <span v-html="item.warn_level"></span>
                        </div>
                    </div>
                    <div class="noData" v-show="alarmData.length == 0">
                        <img src="@/assets/DeviceDetails/noData.png" alt />
                        <div>暂无告警</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box_bottom">
            <div class="mask"></div>
            <div class="zone">
                <div class="zone_item" v-for="item in zoneList" :key="item.id" v-if="!factory.factory_img">
                    <div class="title">{{ item.zone_name }}</div>
                    <div class="labels">
                        <div @click="toDevice(item)" class="label">
                            <span>设备数:</span>
                            <span>{{ item.device_num }}</span>
                        </div>
                        <div class="label" @click="toWarn(item)">
                            <span>告警数:</span>
                            <span>{{ item.warn_num }}</span>
                        </div>
                        <div class="label" @click="toOrder(item)">
                            <span>工单数:</span>
                            <span>{{ item.order_num }}</span>
                        </div>
                    </div>
                </div>
                <div class="zone_item_p" v-for="(item, index) in zoneList" :key="item.id" v-if="factory.factory_img && factory.factory_img != ''" :style="`left:${item.x_per};top:${item.y_per};z-index: ${index + 1};`">
                    <div class="bg" @mouseenter="setZone(item)" @mousemove="showInfo($event, item)" @mouseleave="hideInfo" @click="toDevice(item)">
                        <div class="name">
                            {{ item.zone_name }}
                        </div>
                    </div>
                </div>
                <div class="zone_label" v-show="activeZone" :style="`left:${mouseX}%;top:${mouseY}%`">
                    <div class="title">
                        {{ activeZone ? activeZone.zone_name : '' }}
                    </div>
                    <div class="info1" @click="toDevice(activeZone)">
                        <span>设备数:</span>
                        <span>{{ activeZone ? activeZone.device_num : '' }}</span>
                    </div>
                    <div class="info1" @click="toWarn(activeZone)">
                        <span>告警数:</span>
                        <span>{{ activeZone ? activeZone.warn_num : '' }}</span>
                    </div>
                    <div class="info1" @click="toOrder(activeZone)">
                        <span>工单数:</span>
                        <span>{{ activeZone ? activeZone.order_num : '' }}</span>
                    </div>
                </div>
                <div class="img_bg" v-show="factory.factory_img">
                    <img :src="factory.factory_img" alt />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { indexDeviceDataApi, requestApi } from '@/requset/api'
export default {
    data() {
        return {
            zoneList: [],

            factory: {
                factorySelected: 0,
                factoryList: [],
                factory_img: '',
            },
            // 统计数据
            indexStats: {},
            //告警数据
            alarmData: [],
            mouseX: 0,
            mouseY: 0,
            activeZone: null,
        }
    },
    methods: {
        // 跳转设备页面（zone id）
        toDevice(item) {
            let { group_id, company_id, factory_id, zone_id } = item
            this.$router.push(`/index/devicemang/device?group_id=${group_id}&company_id=${company_id}&factory_id=${factory_id}&zone_id=${zone_id}`)
        },
        // 到告警页面
        toWarn(item) {
            let { group_id, company_id, factory_id, zone_id } = item
            this.$router.push(`/index/expdig/warn?group_id=${group_id}&company_id=${company_id}&factory_id=${factory_id}&zone_id=${zone_id}`)
        },
        toOrder(item) {
            let { group_id, company_id, factory_id, zone_id } = item
            this.$router.push(`/index/expdig/notice?group_id=${group_id}&company_id=${company_id}&factory_id=${factory_id}&zone_id=${zone_id}`)
        },
        // 获取工厂列表
        indexDeviceData() {
            return indexDeviceDataApi()
                .then((res) => {
                    if (res.data.code == 0) {
                        let arr = res.data.data
                        arr.forEach((e) => {
                            this.factory.factoryList.push({
                                id: e.id,
                                name: e.factory_name,
                            })
                        })
                    }
                })
                .then(() => {
                    if (!this.$route.query.id) {
                        var id = this.factory.factoryList[0].id
                    } else {
                        var id = Number(this.$route.query.id)
                    }
                    this.factory.factorySelected = id
                    this.factorytotalData(id)
                    this.factoryRecentAlarm(id)
                    this.indexZones(id)
                })
        },
        // 查询工厂数据统计
        factorytotalData(id) {
            requestApi('post', 'index/stats', { id }, true).then((res) => {
                if (res.data.code == 0) {
                    this.indexStats = res.data.data[0]
                }
            })
        },

        // 近期告警
        factoryRecentAlarm(id) {
            let moment = require('moment')
            requestApi('post', 'index/recent/alarm', { id }, true).then((res) => {
                if (res.data.code == 0) {
                    let a = res.data.data
                    a.forEach((e) => {
                        e.create_time = moment(new Date(e.create_time)).format('YYYY-MM-DD HH:mm:ss')
                        let level = e.warn_level
                        if (level == 1) e.warn_level = `<span style="color:#31e1d9;font-size:18px">一般</span>`
                        else if (level == 2) e.warn_level = `<span style="color:#FAC222;font-size:18px">中等</span>`
                        else e.warn_level = `<span style="color:#F85726;font-size:18px">严重</span>`
                        try {
                            e.key = e.content.split('|')[e.content.split('|').length - 1]
                        } catch (error) {
                            e.key = ''
                        }
                    })
                    this.alarmData = a
                } else {
                    this.alarmData = []
                }
            })
        },
        indexZones(id) {
            requestApi('post', 'index/zones', { id }, true).then((res) => {
                if (res.data.code == 0) {
                    this.zoneList = res.data.data
                    this.factory.factory_img = res.data.factory_img
                } else {
                    this.zoneList = []
                }
            })
        },
        // 切换工厂
        changeFactory(e) {
            this.factorytotalData(e)
            this.factoryRecentAlarm(e)
            this.indexZones(e)
        },
        //跳转至设备详情
        toDeviceDel(val) {
            let { device_id, sensor_id, create_time, key } = val
            this.$router.push(`/index/expdig/diagnosis?device_id=${device_id}&time=${create_time}&sensor_id=${sensor_id}&key=${key}`)
        },
        setZone(item) {
            this.activeZone = item
        },
        showInfo(event, item) {
            const zoneBox = document.querySelector('.zone')
            const rect = zoneBox.getBoundingClientRect()
            const offsetX = event.clientX - rect.left
            const offsetY = event.clientY - rect.top
            this.mouseX = ((offsetX / rect.width) * 100).toFixed(4)
            this.mouseY = ((offsetY / rect.height) * 100).toFixed(4)
        },
        hideInfo() {
            this.activeZone = null
        },
    },
    mounted() {
        const zoneBox = document.querySelector('.zone')
        zoneBox.addEventListener('click', (event) => {
            const rect = zoneBox.getBoundingClientRect()
            const offsetX = event.clientX - rect.left
            const offsetY = event.clientY - rect.top
            this.clickX = ((offsetX / rect.width) * 100).toFixed(4)
            this.clickY = ((offsetY / rect.height) * 100).toFixed(4)

        })
    },
    created() {
        this.indexDeviceData()
        // 获取工厂id
    },
}
</script>
<style lang="less" scoped>


.factoryDetail {
    height: 100%;
    width: 100%;

    .box_top {
        width: calc(100% - 320px);
        height: 150px;
        float: left;
        background-image: url(@/assets/common/Form_bg.png);
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .top_item {
            width: 180px;
            height: 60%;
            background-image: url(../../assets/Home/Home_item_bg1.png);
            background-size: 100% 100%;
            position: relative;

            color: #00e4ff;

            .number {
                position: absolute;
                left: 50%;
                top: 40%;
                transform: translate(-50%, -50%);
                font-size: 32px;
                font-size: 44px;
                font-family: 'UnidreamLED';
            }

            .title {
                font-weight: 600;
                position: absolute;
                left: 50%;
                font-size: 14px;
                transform: translateX(-50%);
                bottom: 22%;
                color: #b2e3ff;
            }
        }
    }

    .box_bottom {
        width: calc(100% - 320px);
        height: calc(100% - 150px);
        float: left;
        position: relative;
        // overflow: hidden;
        display: flex;

        .mask {
            width: 100%;
            height: 100%;
            background-image: url(@/assets/common/table_bg.png);
            background-size: 100% 100%;
            opacity: 0.8;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }

        .zone {
            position: absolute;
            left: 3%;
            width: 94%;
            height: 94%;
            top: 3%;

            .img_bg {
                position: absolute;
                left: 0;
                z-index: -1;
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .zone_item {
                width: 22%;

                background-image: url(@/assets/Device/device_bg.png);
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                float: left;

                margin-right: 3%;
                margin-bottom: 1%;

                .title {
                    width: 100%;
                    color: #b2e3ff;
                    font-weight: 600;
                    text-align: center;
                    font-size: 18px;
                }

                .labels {
                    // background-color: red;
                    width: 86%;

                    margin-left: 7%;
                    margin-bottom: 2%;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .label {
                        display: flex;
                        justify-content: space-between;
                        // background-color: pink;
                        height: 20px;
                        line-height: 20px;
                        transition: all 0.5s;

                        span:nth-child(1) {
                            color: #b2e3ff;
                        }

                        span:nth-child(2) {
                            color: #0cd9e8;
                            font-weight: 600;
                        }
                    }

                    .label:hover {
                        background-color: #007bff;
                        cursor: pointer;
                    }
                }
            }

            .zone_item1 {
                border-left: 10px transparent solid;
                border-top: 15px rgba(5, 5, 6, 0.8) solid;
                border-bottom: 10px transparent solid;
                border-right: 10px transparent solid;
                position: absolute;
                // animation: mymove 1.3s linear infinite;

                .title {
                    width: 120px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    position: absolute;
                    left: -62px;
                    top: -100px;
                    background-color: rgba(5, 5, 6, 0.8);
                    font-size: 14px;
                    color: white;
                    border-radius: 10px 10px 0 0;
                }

                .labels {
                    width: 120px;
                    position: absolute;
                    left: -62px;
                    top: -74px;
                    font-size: 12px;
                    background-color: rgba(5, 5, 6, 0.8);

                    .label {
                        display: flex;

                        justify-content: space-between;
                        // background-color: pink;
                        height: 20px;
                        line-height: 20px;
                        transition: all 0.5s;
                        width: 86%;
                        margin-left: 7%;

                        span:nth-child(1) {
                            color: #b2e3ff;
                        }

                        span:nth-child(2) {
                            color: #0cd9e8;
                            font-weight: 600;
                        }
                    }

                    .label:hover {
                        background-color: #007bff;
                        cursor: pointer;
                    }
                }
            }

            .zone_item_p {
                // animation: mymove 1.3s linear infinite;
                width: 14px;
                height: 14px;
                border-radius: 50%;
                left: 50%;
                top: 50%;
                position: absolute;
                z-index: 1;

                .bg {
                    width: 44px;
                    height: 70px;
                    position: absolute;
                    bottom: 10px;
                    left: -15px;
                    background-image: url(../../assets/FactoryDetails/jt.png);
                    background-size: 100% 100%;

                    .name {
                        position: absolute;
                        top: 40%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 50px;
                        max-width: 150%;
                        min-width: 100%;
                        /* 添加此行 */
                        white-space: nowrap;
                        transform: translateY(-50%);
                        color: white;
                        font-size: 12px;
                        text-align: center;
                    }
                }

                .bg:hover {
                    cursor: pointer;
                }
            }

            .zone_label {
                width: 100px;
                height: 100px;
                background-color: #04204c;
                border: 1px solid #0cd9e8;
                border-radius: 4px;
                position: absolute;
                z-index: 99 !important;
                padding: 5px 10px;
                color: #0cd9e8;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                .title {
                    height: 24px;
                    line-height: 24px;
                    text-align: center;
                    color: #0cd9e8;
                    font-weight: bold;
                }

                .info1 {
                    height: 20px;
                    line-height: 20px;
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                }

                .info1:hover {
                    background-color: #007bff;
                    cursor: pointer;
                }
            }
        }
    }

    .box_right {
        width: 300px;
        padding: 0 10px;
        height: 100%;
        float: right;
        // background-color: aquamarine;
        background-image: url(@/assets/DeviceDia/tree_left_bg.png);
        background-size: 100% 100%;
        position: relative;

        .el-select {
            width: 92%;
            position: absolute;
            left: 4%;
            top: 4%;
        }

        .warn {
            width: 88%;
            position: absolute;
            left: 6%;
            top: 12%;
            height: 86%;

            .title {
                width: 100%;
                height: 40px;
                // background-color: #0cd9e8;
                line-height: 40px;
                color: #b2e3ff;
                font-size: 20px;
                font-weight: 600;
            }

            .warn_items {
                height: calc(100% - 40px);
                width: 100%;
                overflow: auto;

                // background-color: red;
                .warn_item {
                    width: 100%;
                    height: 156px;
                    margin-bottom: 16px;
                    // background-color: #00e4ff;
                    background-image: url(@/assets/common/form_item_bg.png);
                    background-size: 100% 100%;
                    position: relative;
                    transition: all 0.3s;
                    cursor: pointer;

                    .warn_time {
                        position: absolute;
                        width: 80%;
                        left: 10%;
                        top: 14px;
                        height: 30px;
                        color: #007bff;
                        font-weight: 600;
                        line-height: 30px;
                        text-align: center;
                        font-size: 14px;
                    }

                    .warn_title {
                        position: absolute;
                        height: 26px;
                        width: 80%;
                        left: 10%;
                        top: 44px;
                        line-height: 26px;
                        display: flex;
                        justify-content: center;
                        font-size: 14px;

                        span:nth-child(1) {
                            color: #b2e3ff;
                        }

                        span:nth-child(2) {
                            color: #0cd9e8;
                        }
                    }

                    .warn_device {
                        font-size: 14px;
                        display: flex;
                        text-align: center;
                        justify-content: center;
                        position: absolute;
                        height: 26px;
                        width: 80%;
                        line-height: 26px;
                        left: 10%;
                        top: 74px;

                        span:nth-child(1) {
                            color: #b2e3ff;
                        }

                        span:nth-child(2) {
                            color: #0cd9e8;
                        }
                    }

                    .warn_level {
                        display: flex;
                        justify-content: center;
                        position: absolute;
                        height: 26px;
                        width: 80%;
                        line-height: 26px;
                        left: 10%;
                        top: 104px;

                        span:nth-child(1) {
                            color: #b2e3ff;
                        }

                        span:nth-child(2) {
                            color: #0cd9e8;
                        }
                    }
                }

                // .warn_item:hover {
                //     transform: scale(1.1);
                // }

                .noData {
                    width: 100%;
                    height: 200px;
                    margin-top: 30%;
                    // background-color: red;
                    text-align: center;

                    div {
                        color: white;
                        font-size: 18px;
                        margin-top: 14px;
                        font-weight: 600;
                    }
                }
            }
        }
    }
}
</style>
